<template>
  <div>
    <i-card :bordered="false" class="margin-bottom-10 notification-item" dis-hover v-for="notification in notifications" :key="'notification_' + notification.id">
      <h4>{{notification.from.nick}} <span class="operation">{{getOperation(notification)}}</span></h4>
      <p class="margin-top-5">{{notification.createdAtUtc}}</p>
      <router-link class="margin-top-10" v-show="notification.item.title" :to="{path: notification.item.url}">{{notification.item.title}}</router-link>
    </i-card>
    <i-card dis-hover v-show="!total" style="min-height:300px;text-align: center;padding-top:100px;">暂无数据</i-card>
  </div>
</template>

<script>
import util from '@/libs/util'
export default {
  data() {
    return {
      notifications: [],
      total: 0,
      page: 1
    }
  },
  methods: {
    getOperation(notification) {
      if (
        notification.typeName === 'PostCommented' ||
        notification.typeName === 'PostAgreed' ||
        notification.typeName === 'PostDisagreed'
      ) {
        return util.format(
          notification.operation,
          notification.item.isAssignment ? '作业' : '帖子'
        )
      }
      return notification.operation
    },
    search() {
      const that = this
      this.$http
        .get('/vts/notification/list', { page: this.page })
        .then(response => {
          that.notifications = response.data.notifications
          that.total = response.data.total
        })
    }
  },
  mounted() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
.notification-item {
  h4 {
    font-weight: normal;
  }
  a {
    display: block;
    border: 1px solid #f0f0f0;
    padding: 5px 10px;
  }
}
</style>
